
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./libgif.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {});
        viewer.scene.debugShowFramesPerSecond = true;

        let div = document.createElement("div");
        let img = document.createElement("img");
        div.appendChild(img);
        img.src = './tf.gif'

        img.onload = () => {
            let rub = new SuperGif({
                gif: img
            })
            rub.load(() => {
                const entity = viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
                    billboard: {
                        image: new Cesium.CallbackProperty(() => {
                            return rub.get_canvas().toDataURL("image/png");
                        }, false),
                        scale: 0.3,
                        // scaleByDistance: new Cesium.NearFarScalar(10, 1.2, 50, 1.2),
                        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 600000),
                        // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        // disableDepthTestDistance: 1000000
                    },
                });
                resolve(entity);
            });
        };
    </script>
</body>

</html>